<!DOCTYPE html>
<html lang="en">
<head th:include="/include::head">
	<style type="text/css">
	  body {
		padding-bottom: 40px;
	  }
	  .sidebar-nav {
		padding: 9px 0;
	  }
	</style>
</head>

<body>
	<!-- topbar starts -->
	<div th:substituteby="/include::header"></div>
	<!-- topbar ends -->
		<div class="container-fluid">
		<div class="row-fluid">
			<div th:substituteby="/include::items"></div>
			
			<noscript>
				<div class="alert alert-block span10">
					<h4 class="alert-heading">Warning!</h4>
					<p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
				</div>
			</noscript>
			
			<div id="content" class="span10">
			<!-- content starts -->
			

			<div>
				<ul class="breadcrumb">
					<li>
						<a href="#">Home</a> <span class="divider">/</span>
					</li>
					<li>
						<a href="#">User Add</a>
					</li>
				</ul>
			</div>
			
			<div class="row-fluid">
				<div class="box span12">
					<div class="box-header well">
						<h2><i class="icon-info-sign"></i>User Form</h2>
						<div class="box-icon">
							<a href="#" class="btn btn-setting btn-round"><i class="icon-cog"></i></a>
							<a href="#" class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
							<a href="#" class="btn btn-close btn-round"><i class="icon-remove"></i></a>
						</div>
					</div>
					<div class="box-content">
						<form class="form-horizontal" th:object="${userForm}"  th:action="@{/users}" method="POST">
						<div id="errors" class="alert alert-error" th:if="${#fields.hasErrors('*')}">
                        	<h1 th:text="#{errors.header}"/>
                        	<ul>
                            <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
                        	</ul>
                    	</div>
						  <fieldset>
							<div class="control-group">
							  <label class="control-label" for="username">Username </label>
							  <div class="controls">
								<input type="text" class="span6" id="username" name="username" th:value="*{username}"/>
							  </div>
							</div>
							<div class="control-group">
							  <label class="control-label" for="username">Password </label>
							  <div class="controls">
								<input type="password" class="span6" name="password" id="password" th:value="*{password}"/>
							  </div>
							</div>
							
							<div class="control-group">
							  <label class="control-label" for="realName">Realname </label>
							  <div class="controls">
								<input type="text" class="span6" name="realName" id="realName" th:value="*{realName}"/>
							  </div>
							</div>

							 <div class="control-group">
								<label class="control-label">User Roles</label>
								<div class="controls" th:unless="${#lists.isEmpty(userRoles)}">
								  <label class="checkbox inline" th:each="userRole:${userRoles}">
									<input type="checkbox" name="userRoles" th:value="${userRole}" th:text="#{${userRole.messageKey}}" th:checked="${userForm.hasRole(userRole)}"> Option 1</input>
								  </label>
								</div>
							  </div>      
							
							<div class="form-actions">
							  <button type="submit" class="btn btn-primary">Save changes</button>
							  <button type="reset" class="btn">Cancel</button>
							</div>
						  </fieldset>
						</form>   
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- content ends -->
			</div><!--/#content.span10-->
		</div><!--/fluid-row-->
				
	<hr/>

	</div><!--/.fluid-container-->

	<footer th:substituteby="/include :: footer"></footer>
	<section id="scripts">
    	<section th:include="/include :: required_scripts"/>
	</section>	
</body>
</html>
